@import "../../common/global.less";

@side-width: 320px;
@tree-icon-size: 1.18em;
@tree-toolbar-width: 32px;
@tree-font-size: 1.12em;
@table-font-size: 1.1em;
@table-status-icon-size: 1.14em;
@bottom-bar-height: 28px;

.smallTable {
    th,td{
        font-size: 10px;
    }
}

.statusRunning {
    color: @status-running-color;
}
.statusStopped {
    color: @status-stopped-color;
    opacity: 0.5;
}
.statusStarting {
    color: @status-starting-color;
}
.statusStopping {
    color: @status-stopping-color
}
.attachedStatus {
    color: green;
}
.noAttachedStatus {
    color: gray;
}
.vmTreeGroupIcon {
    color: @primary-color;
    font-size: 1.268em;
}
.attachedStatus, .noAttachedStatus {
    font-size: @tree-icon-size;
}
.bottomBar {
    position: fixed;
    bottom: 5px;
    .commonBar();
    border-top: none;
    box-sizing: border-box;
    height: @bottom-bar-height;
    width: @side-width;
    .bottomBarButton {
        height: 100%;
    }
}
.consoleExtra {
    position: fixed;
    top: 66px;
    right: 8px;
    button {
        font-weight: bold;
    }
}
.viewHeader {
    .commonBar();
    display: flex;
    height: 25px;
    .viewTitle {
        flex: 1 1 auto;
        width: 100%;
        font-size: 1.2em;
        .viewTitleContainer {
            display: flex;
            align-items: center;
            justify-content: center;
            vertical-align: center;
            label {
                padding: 0 0 0 6px;
                color: @primary-color;
                font-weight: bold;
            }
        }
    }
    .viewHeaderTool {
        width: 28px;
    }
}
.consoleScrollbarMaskForMac {
    position: fixed;
    bottom: 30px;
    right: 5px;
    width: @scrollbar-size;
    height: @scrollbar-size;
    background: @console-background;
}
.commandInput {
    background: @console-background;
    color: @console-color;
    font-family: @console-font-family;
    border: none;
    box-shadow: none;
    border-radius: 0;
    width: 100%;
    .commandRightIcon {
        color: #1890ff;
    }
    input {
        border: none;
        box-shadow: none;
        background: @console-background;
        color: @console-color;
        font-family: @console-font-family;
    }
}
.serverTree {
    display: flex;
    .treeToolbar {
        flex: 0 0 @tree-toolbar-width;
        width: @tree-toolbar-width;
        .commonBar();
        border-right: none;
        box-sizing: border-box;
        .treeToolbarBtn {
            margin-bottom: 6px;
            width: 100%;
        }
    }
    .treeContent {
        flex: 1;
        overflow: auto;
    }
    .treeView {
        font-size: @tree-font-size;
        span[class='ant-tree-switcher ant-tree-switcher-noop'] {
            visibility: hidden;
            width: 5px;
        }
        .statusIcon {
            margin: 0 5px 0 0;
            vertical-align: middle;
            font-size: @tree-icon-size;
        }
        .groupIcon {
            color: @primary-color;
            font-size: @tree-icon-size;
            margin-top: 2px;
        }
        .groupRow {
            margin-left: 5px;
        }
    }
}
.bottomBar, .treeToolbar {
    button:hover {
        .commonBarButtonHover();
    }
    button:disabled {
        .commonBarButtonDisable();
    }
}
.serverTable {
    td {
        font-size: @table-font-size;
        .statusIcon {
            margin: 0 5px 0 0;
            vertical-align: middle;
            font-size: @table-status-icon-size;
        }
    }
}
.commandPrefix {
    color: lightgray;
    margin: 0 10px 0 2px;
    .textNoSelect();
}
.serverMgr {
    display: flex;
    .serverMgrSide {
        flex: inherit;
        width: @side-width;
    }
    .serverMgrContent {
        flex: inherit;
        width: calc(100% - @side-width);
    }
}
.groupRow {
    color: @primary-color;
    font-weight: bold;
}
